<template>
  <div
    id="myChart"
    :style="{ width: '95vw', height: '80vh' }"
  ></div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data () {
    return {
      eData: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {

      const logs = await this.$http.get(process.env.BASE_URL + 'run.log')
        .then(res => {
          return res.data.split('\n').filter(item => item)
        })


      const data = logs.map(item => {
        return [
          item.substring(0, 19),
          item.substring(123, 130)
        ]
      })

      const echarts = this.$echarts

      var myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: 'lex',
        },
        xAxis: {
          type: 'time',
          // boundaryGap: [0, 0],
          axisPointer: {
            value: '2016-10-7',
            snap: true,
            lineStyle: {
              color: '#7581BD',
              width: 2
            },
            label: {
              show: true,
              formatter: function (params) {
                return echarts.format.formatTime('hh:mm:ss', params.value);
              },
              backgroundColor: '#7581BD'
            },
            handle: {
              show: true,
              color: '#7581BD'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          scale: true,
          boundaryGap: ['20%', '20%']
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: data
          }
        ]
      });
    }
  }

}
</script>

<style>
</style>
